<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
        
        <title>Pushmessage Documentation</title>
        
        <script src="/js/greyspots.js" type="text/javascript"></script>
        <link href="/css/greyspots.css" type="text/css" rel="stylesheet" />
        
        <script src="/js/ace/ace.js" data-ace-base="/js/ace/" type="text/javascript" charset="utf-8"></script>
        <script src="/js/ace/ext-language_tools.js" type="text/javascript"></script>
        <script src="/js/ace/ext-searchbox.js" type="text/javascript"></script>
        
        <script src="doc-library/doc.js" type="text/javascript"></script>
        <link href="doc-library/doc.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <gs-jumbo>
            <h1 class="text-center">Pushmessage</h1>
        </gs-jumbo>
            
        <gs-container min-width="sml;med;lrg">
            <h3>Function:</h3>
            <pre><code>GS.pushMessage(&lt;HTML&gt;[, &lt;TIME&gt;[, &lt;CALLBACK&gt;]]);</code></pre>
            
            <h3>Description:</h3>
            <p>This Javascript function puts a temporary message with HTML in it at the top of the document.</p>
            
            <h1>Examples:</h1>
            <div class="doc-example-description">
                <span class="h3">Skeleton Example:</span>
                <div>A basic pushmessage with some text in it. The message will have the following behaviors:
                    <ol>
                        <li>The first one will appear at the top of the screen. Subsequent messages will appear at the bottom of the list of messages.</li>
                        <li>The messages will be permanent because we are not closing them.</li>
                    </ol>
                </div>
            </div>
            <gs-doc-example>
                <template for="html">
                    <gs-button onclick="testMessage()">Message</gs-button>
                </template>
                <template for="js">
                    function testMessage() {
                        GS.pushMessage('This is a pushmessage.');
                    }
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Timed Closing Example:</span>
                <p>A pushmessage with some text in it and a time. These messages will close themselves after 1.5 seconds.</p>
            </div>
            <gs-doc-example>
                <template for="html"><gs-button onclick="testMessage()">Message</gs-button></template>
                <template for="js">
                    function testMessage() {
                        GS.pushMessage('This is a test message that will close itself.', 1500);
                    }
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Manual Closing Example:</span>
                <p>A button to open a pushmessage and a button to close a pushmessage.</p>
            </div>
            <gs-doc-example>
                <template for="html">
                    <gs-button onclick="openMessage()">Add Message</gs-button>
                    <gs-button onclick="closeEarliestMessage()">Remove Message</gs-button>
                </template>
                <template for="js">
                    var arrMessage = [];
                    
                    function openMessage() {
                        // open new message and add it to the array
                        //      of messages the reason we have an array
                        //      of messages is in case you open more messages
                        arrMessage.push(GS.pushMessage('A test message.'));
                    }
                    
                    function closeEarliestMessage() {
                        // close message at index 0 in the message array
                        GS.closePushMessage(arrMessage[0]);
                        
                        // remove message from array
                        arrMessage.splice(0, 1);
                    }
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Dynamic Message Example:</span>
                <p>A pushmessage with some text in it, a time and a callback function. These messages will have a number that increments inside.</p>
            </div>
            <gs-doc-example>
                <template for="html" height="auto"><gs-button onclick="message()">Message</gs-button></template>
                <template for="js" height="auto">
                    var i = 1;
                    
                    function message() {
                        GS.pushMessage('This is message #<span class="count"></span>.', 1000, function () {
                            // here "this" is the element the HTML is inside.
                            // we are getting the ".count" span
                            //      so that we can put "i" into it.
                            this.querySelector('.count').textContent = i;
                            i += 1;
                        });
                    }
                </template>
            </gs-doc-example>
        </gs-container>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
    </body>
</html>